<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact | Awesome JavaScript</title>
    <meta
      name="description"
      content="Contact Awesome JavaScript Projects for suggesting the new projects that can be added in the website."
    />
    <link rel="stylesheet" href="assets/css/styles.css" />
    <link rel="shortcut icon" href="./assets/Images/favicons/faviconss.png" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Darkmode.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
    <!-- separate css file for Darkmode included -->
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <!--CSS Preloader-->
    <div id="spinner-wrapper">
      <div class="sk-folding-cube">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
      </div>
    </div>
    <a id="goToTop" href="#top">
      <i class="fa fa-arrow-up" aria-hidden="true"></i>
    </a>
    <main id="top">
      <!-- Added Header -->
      <header>
        <nav>
          <h2 class="shadow"><a href="index.html">Awesome JavaScript</a></h2>
          <i
            class="fa fa-bars"
            aria-hidden="true"
            id="menuBar"
            onclick="menu()"
          ></i>
          <i
            class="fa fa-times"
            aria-hidden="true"
            id="menuClose"
            onclick="menuClose()"
          ></i>
          <ul id="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html#about">About</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html" class="active">Contact</a></li>

            <li><a href="signuplogin.html">Signup/Login</a></li>

            <a
              href="https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects"
              target="_blank"
              class="github githubs"
              ><i class="fa fa-github" aria-hidden="true"></i
            ></a>
          </ul>
        </nav>
        <div class="bannerSection">
          <div class="bannerText">
            <h1>Contact Us</h1>
            <h2>
              The great collection of JavaScript projects, <br />just for you!!!
            </h2>
            <div class="buttonCenter">
              <a href="#contact" class="commanBtn">Contact Now</a>
              <a
                href="https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects"
                target="_blank"
                class="github"
                ><i class="fa fa-github" aria-hidden="true"></i> Github</a
              >
            </div>
          </div>
          <div class="bannerIllustration">
            <img
              src="./assets/Images/contactaat.png"
              alt="Contact Illustration"
            />
          </div>
        </div>
      </header>
      <!-- Closed Header -->

      <!-- Path -->
      <div class="path">
        <h2>Helping you, is our aim.</h2>
        <p><a href="index.html">Home</a> / Contact</p>
      </div>

      <!-- Path -->

      <!-- Added Contact -->

      <section class="body contact" id="contact">
        <h2>Contact Now</h2>
        <hr />
        <p>
          Be free to make your query solved with us. Contact Us Now. You can get
          the code on GitHub.
        </p>

        <div class="contactForm">
          <!-- <form action="#" method="post"> -->

          <!-- <form
            action="https://formcarry.com/s/S2thQbCqEvW"
            method="POST"
            accept-charset="UTF-8"
          > -->
          <form onsubmit=" event.preventDefault(); JSalert();">
            <p>
              <label for="fname">First Name</label>
              <input
                type="text"
                id="fname"
                placeholder="Enter your First Name here"
                name="fname"
                required
              />
            </p>
            <p>
              <label for="lname">Last Name</label>
              <input
                type="text"
                id="lname"
                placeholder="Enter your Last Name here"
                name="lname"
                required
              />
            </p>
            <p>
              <label for="email">Your Email</label>
              <input
                id="email"
                placeholder="Enter your Email id here"
                name="email"
                required
              />
            </p>
            <p>
              <label for="subject">Subject</label>
              <input
                type="text"
                id="subject"
                placeholder="Enter your Subject here"
                name="subject"
                required
              />
            </p>
            <p>
              <label for="message">Message</label>
              <textarea
                name="message"
                id="message"
                placeholder="Enter your Message here"
                cols="93"
                rows="10"
                required
              ></textarea>
            </p>
            <p class="button-container">
              <button
                id="back-button"
                type="button"
                onclick="window.history.back();"
              >
                Back
              </button>
              <input type="submit" id="submit" value="Send Message" />
            </p>
          </form>
        </div>
      </section>
      <!-- Closed Contact -->
    </main>
    <!-- Added footer -->
    <footer>
      <p>
        ©
        <script>
          document.write(new Date().getFullYear());
        </script>
        Copyright. <b>Awesome JavaScript Project</b>. All Rights Reserved.
      </p>
      <p>
        Design by
        <a href="https://cratonik.com" target="_blank" rel="follow">Cratonik</a>
      </p>
    </footer>
    <!-- Closed Footer -->
    <script src="./assets/js/scripts.js"></script>
    <script type="text/javascript">
      function ValidateEmail(inputText) {
        var mailformat =
          /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        if (inputText.match(mailformat)) return true;
        else return false;
      }

      function JSalert() {
        console.log(document.getElementById("email").value);
        if (ValidateEmail(document.getElementById("email").value)) {
          swal("Congrats!", "Message was delivered successfully!", "success");
          console.log("Its true");
          return true;
        } else {
          swal("Error!", "Email is not entered correctly!", "error");
          console.log("Its false");
          return false;
        }
      }
    </script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <!-- a separate js file for Darkmode added -->
    <script src="./index.js"></script>
    <script src="./assets/js/scripts.js"></script>
  </body>
</html>
